
<template>
  <BaseCharts :option="option"></BaseCharts>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import BaseCharts from '../../base/baseCharts.vue';
/** 数据 */
const data = [
  { code: "600519", stock: "aaa", fundPost: "21.987691" },
  { code: "000858", stock: "bbb", fundPost: "20.377176" },
  { code: "002475", stock: "ccc", fundPost: "19.127404" },
  { code: "600276", stock: "ddd", fundPost: "18.40882" },
  { code: "601318", stock: "eee", fundPost: "17.980597" },
  { code: "000661", stock: "000", fundPost: "16.957898" },
  { code: "000333", stock: "ggg", fundPost: "15.099577" },
  { code: "300760", stock: "eee", fundPost: "14.76103" },
  { code: "300750", stock: "ttt", fundPost: "13.002175" },
  { code: "601888", stock: "000", fundPost: "12.133536" },
];

/** 检查数组中是否包含目标值 */
const contains = (arr: any, dst: number) => {
  let length = arr.length;
  while (length--) {
    if (arr[length] === dst) {
      return length;
    }
  }
  return false;
}

const attackSourcesColor = [
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#EB3B5A" },
    { offset: 1, color: "#FE9C5A" },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#FA8231" },
    { offset: 1, color: "#FFD14C" },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#F7B731" },
    { offset: 1, color: "#FFEE96" },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#395CFE" },
    { offset: 1, color: "#2EC7CF" },
  ]),
]

const attackSourcesColor1 = [
  "#EB3B5A",
  "#FA8231",
  "#F7B731",
  "#3860FC",
  "#1089E7",
  "#F57474",
  "#56D0E3",
  "#1089E7",
  "#F57474",
  "#1089E7",
  "#F57474",
  "#F57474",
]

let attaData: any[] = [];
let attaName: any[] = [];
let topName: any[] = [];
let salvProMax: any[] = []; //背景按最大值

data.forEach((it, index) => {
  attaData[index] = parseFloat(it.fundPost).toFixed(2);
  attaName[index] = it.stock;
  topName[index] = `${it.code} ${it.stock}`;
});
for (let i = 0; i < attaData.length; i++) {
  salvProMax.push(attaData[0]);
}
function attackSourcesDataFmt(sData: any[]) {
  let sss: any[] = [];
  sData.forEach(function (item, i) {
    let itemStyle = {
      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
    };
    sss.push({
      value: item,
      itemStyle: itemStyle,
    });
  });
  return sss;
}

const option = computed(() => {
  const data = {
    tooltip: {
      show: false,
      backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
      textStyle: {
        fontSize: 16,
      },
    },
    color: ["#F7B731"],

    grid: {
      left: "11%",
      right: "1%",
      width: "75%",
      bottom: "10%",
      top: "5%",
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisPointer: {
          label: {
            show: true,
            //margin: 30
          },
        },
        pdaaing: [5, 0, 0, 0],
        postion: "right",
        data: attaName,
        axisLabel: {
          margin: 30,
          fontSize: 10,
          align: "left",
          padding: [2, 0, 0, 0],
          color: "#000",
          rich: {
            nt1: {
              color: "#000",
              backgroundColor: attackSourcesColor1[0],
              width: 13,
              height: 13,
              fontSize: 10,
              align: "center",
              borderRadius: 100,
              lineHeight: "5",
              padding: [0, 1, 2, 1],
            },
            nt2: {
              color: "#000",
              backgroundColor: attackSourcesColor1[1],
              width: 13,
              height: 13,
              fontSize: 10,
              align: "center",
              borderRadius: 100,
              padding: [0, 1, 2, 1],
            },
            nt3: {
              color: "#000",
              backgroundColor: attackSourcesColor1[2],
              width: 13,
              height: 13,
              fontSize: 10,
              align: "center",
              borderRadius: 100,
              padding: [0, 1, 2, 1],
            },
            nt: {
              color: "#000",
              backgroundColor: attackSourcesColor1[3],
              width: 13,
              height: 13,
              fontSize: 10,
              align: "center",
              lineHeight: 3,
              borderRadius: 100,
              padding: [0, 1, 2, 1],
            },
          },
          formatter: function (value:number, index:number) {
            index = contains(attaName, value) + 1;
            if (index - 1 < 3) {
              return ["{nt" + index + "|" + index + "}"].join("\n");
            } else {
              return ["{nt|" + index + "}"].join("\n");
            }
          },
        },
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          color: "#000",
          fontSize: "10",
        },
        data: attackSourcesDataFmt(attaName),
      },
      {
        //名称
        type: "category",
        offset: -10,
        position: "left",
        axisLabel: {
          color: `#000`,
          fontSize: 10,
          interval: 0,
          align: "left",
          verticalAlign: "bottom",
          lineHeight: 32,
        },
        axisLine: {
          show: false,
        },
        inverse: false,
        axisTick: {
          show: false,
        },
        data: topName,
      },
    ],
    series: [
      {
        zlevel: 1,
        type: "bar",
        barWidth: "15px",
        animationDuration: 1500,
        data: attackSourcesDataFmt(attaData),
        align: "center",
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: true,
          fontSize: 10,
          color: "#000",
          textBorderWidth: 2,
          padding: [2, 0, 0, 0],
        },
      },
      {
        type: "bar",
        barWidth: 15,
        barGap: "-100%",
        margin: "20",
        data: salvProMax,
        textStyle: {
          //图例文字的样式
          fontSize: 10,
          color: "#000",
        },
        itemStyle: {
          color: "#05325F",
          //width:"100%",
          fontSize: 10,
          borderRadius: 30,
        },
      },
    ],
  }
  return data
})
</script>

<style scoped lang="scss"></style>
